import React, { Component } from 'react'
import Header from '../common/Header';
import { connect } from 'react-redux';
import { Button,Modal } from 'antd-mobile';
import { bianjiCity_action, removeCity_action } from '../../store/store';
import { Toast } from "antd-mobile";
const alert = Modal.alert;
// import { addCity_action } from '../../store/store';
class Case extends Component {
    constructor() {
        super();
        this.state = {
            username: '',
            call: '',
            city: '',
        }
    }
    btnClick = () => {
        if (this.state.username === '' || this.state.call === '' || this.state.city === '') {
            Toast.fail('红星标志的是必填项', 2)
        } else {
            this.props.add(this.state);
            Toast.success('修改成功', 1)
            setTimeout(() => {
                this.props.history.push('/city');
            }, 1000)
        }
    }
    cityClick=(id)=>{
        this.props.remove(id);
        this.props.history.push('/city')
    }
    render() {
        return (
            <div className='case'>
                {/* 头部组件 */}
                <Header left={<span onClick={() => { this.props.history.push('/city') }}>&lt;</span>} title="修改地址" right={<div><span className='iconfont icon-sangedian'></span>|<span className='iconfont icon-cha'></span></div>}></Header>
                {/*表单 */}
                <div className="from">
                    <div className="black">
                        <span className='first'>联系人<span className='xin'>*</span></span>
                        <div className="inp">
                            <input type="text" placeholder={this.props.list.username} onChange={(e) => { this.setState({ username: e.target.value }) }} />
                        </div>
                    </div>
                    <div className="black">
                        <span className='first'></span>
                        <div className="inp">
                            <span>男</span>
                            <span>女</span>
                        </div>
                    </div>
                    <div className="black">
                        <span className='first'>电话<span className='xin'>*</span></span>
                        <div className="inp">
                            <input type="text" placeholder={this.props.list.call} onChange={(e) => { this.setState({ call: e.target.value }) }} />
                        </div>
                        <div className="tong">
                            + 通讯录
                            </div>
                    </div>
                    <div className="black">
                        <span className='first'>地址<span className='xin'>*</span></span>
                        <div className="inp">
                            <input type="text" placeholder={this.props.list.city} onChange={(e) => { this.setState({ city: e.target.value }) }} />
                        </div>
                    </div>

                    <div className="black">
                        <span className='first'>门牌号</span>
                        <div className="inp">
                            <input type="text" placeholder='列如：5号楼203室' />
                        </div>
                    </div>
                    <div className="black">
                        <span className='first'></span>
                        <div className="inp">
                            <span>家</span>
                            <span>学校</span>
                            <span>公司</span>
                        </div>
                    </div>
                </div>
                <div className="btn">

                    <Button onClick={() =>
                        alert('提示', '你确定要删除吗', [
                            { text: '取消', onPress: () => console.log('cancel') },
                            { text: '确定', onPress: () => {this.cityClick(this.props.list.id)} },
                        ])
                    }
                    >
                        删除
                    </Button>
                    <button onClick={() => { this.btnClick() }}>保存</button>
                </div>

            </div>
        )
    }
}
export default connect(
    (state) => {
        return {
            list: state.caseList
        }
    },
    (dispatch) => {
        return {
            add: (item) => {
                dispatch(bianjiCity_action(item))
            },
            remove:(id)=>{
                dispatch(removeCity_action(id))
            }
        }
    }
)(Case)
